<template>
    <div>
        <el-row type="flex" justify="center">
            <el-col :span="12" class="container">
                <el-form :model="register" label-width="100px" class="demo-ruleForm" :rules="rules">
                    <el-form-item label="病历号" prop="caseNumber">
                        <el-input v-model.number="register.caseNumber" @change="searchMedicalId"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="checkApply" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="病历ID" prop="medicalID">
                        <el-input v-model.number="checkApply.medicalID" disabled=""></el-input>
                    </el-form-item>
                    <el-form-item label="项目" prop="name">
                        <el-select filterable  v-model="checkApply.name" placeholder="请选择项目">
                            <el-option v-for="item in fmeditems" :key="item.ID" :label="item.itemName" :value="item.itemName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="目的要求" prop="objective">
                        <el-input v-model="checkApply.objective"></el-input>
                    </el-form-item>
                    <el-form-item label="检查部位" prop="position">
                        <el-input v-model="checkApply.position"></el-input>
                    </el-form-item>
                    <el-form-item label="是否加急" prop="isUrgent">
                        <el-switch
                                v-model="checkApply.isUrgent"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="加急"
                                inactive-text="不加急">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="数量" prop="num">
                        <el-input v-model.number="checkApply.num"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {HOST} from '../../common/config'
    export default {
        data() {
            return {
                register:{
                    caseNumber:""
                },
                checkApply: {
                    medicalID:'',
                    name:'',
                    objective:'',
                    position:'',
                    isUrgent:0,
                    num:''
                },
                rules: {
                    caseNumber: [
                        { required: true, message: '请输入病历号', trigger: 'blur' },
                        { type: 'number', message: '病历号必须为数字值'}
                    ],
                    medicalID:[
                        { required: true, message: '请检查病历号是否正确', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请选择检查项目', trigger: 'change' }
                    ],
                    position: [
                        { required: true, message: '请输入检查部位', trigger: 'blur' }
                    ],
                    num: [
                        { required: true, message: '请输入数量', trigger: 'blur' },
                        { type: 'number', message: '数量必须为数字值'}
                    ]
                },
                fmeditems:[]
            };
        },
        mounted:function () {
            let path=`${HOST}/fmeditems`;
            this.$ajax.get(path).then((res)=>{
                this.fmeditems=res.data;
            })
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.checkApply.isUrgent=this.checkApply.isUrgent?1:0;
                        console.log(this.checkApply);
                        let path=`${HOST}/checkApply/add`;
                        this.$ajax.post(path,this.checkApply).then((res)=>{
                            if(res.data===1){
                                this.$message.success("添加成功！");
                            }else{
                                this.$message.error("请检查病历ID填写是否正确！");
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            searchMedicalId(){
                let path=`${HOST}/medicalRecord?caseNumber=${this.register.caseNumber}`;
                this.$ajax.get(path).then((res)=>{
                    console.log(res.data);
                    this.checkApply.medicalID=res.data.id;
                })
            }
        }
    }
</script>

<style scoped>
    .container{
        margin-top: 60px;
        /*border: 2px solid #eeeeee;
        border-radius: 4px;*/
        padding: 30px;
    }
</style>